<template>
    <view class="app">
        <load :ready="ready"></load>
		
		<view class="list">
			<view class="item" >
				<u-image src="/static/icon_site.png" border-radius="16" width="128" height="128"></u-image>
				<view class="info">
					<view class="name">
						<text class="na">{{info.name}}</text>
						<u-tag v-if="info.type == 1" size="mini" type="success" text="充装站" mode="light" />
						<u-tag v-if="info.type == 2" size="mini" text="供应站" mode="light" />
					</view>
					<view class="tel">
						<u-icon name="phone" color="#0093dd"></u-icon>
						<text>{{info.head_mobile}}</text>
					</view>
					<view class="text">负责人：{{info.head_name}}</view>
					<view class="text">{{info.address}}</view>
					<view style="padding: 5px 0 0;">
						<u-button size="mini" type="success" @click="navigation()">
							<u-icon name="map" size="26"></u-icon>
							导航
						</u-button>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="num-list" v-if="info.shi">
			<view class="item">
				<view class="num">{{info.shi.num + info.kong.num}}</view>
				<view class="name">钢瓶总数量</view>
			</view>
			<view class="item">
				
				<view class="num">{{info.shi.num || 0}}</view>
				<view class="name">实瓶 </view>
			</view>
			<view class="item">
				<view class="num">{{info.kong.num || 0}}</view>
				
				<view class="name">空瓶</view>
			</view>
		</view>
		
		<view class="bottle" v-if="info.shi">
			<view class="title">站点钢瓶</view>
			<view class="item" @click="handleItem(info.shi.data, '实瓶')">
				<view class="name">
					实瓶
				</view>
				<view class="tag-wrap" v-if="info.shi.num">
					<view class="tag" v-for="(item, index) in info.shi.data.slice(0,3)" >
						<u-tag :text="item.code" type="info " />
					</view>	
				</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
			
			<view class="item"  @click="handleItem(info.kong.data, '空瓶')">
				<view class="name">
					空瓶
				</view>
				<view class="tag-wrap" v-if="info.kong.num">
					<view class="tag" v-for="(item, index) in info.kong.data.slice(0,3)" >
						<u-tag :text="item.code" type="info " />
					</view>	
				</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#666"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- .站点详情（显示站点钢瓶跟总数量（1实瓶 2空瓶）司机对瓶用） -->
		<u-popup v-model="showBottle" mode="bottom" height="600" border-radius="32">
			<view class="send-popup">
				<view class="btn-close">
					<u-icon name="close" @click="showBottle = false" size="30"></u-icon>
				</view>
				<view class="title">
					{{bottleTitle}}
				</view>
				<view class="item">
					<view class="tag-wrap">
						<view class="tag" v-for="(item, index) in bottleList" >
							<u-tag :text="item.code" type="info " />
						</view>	
					</view>
				</view>
			</view>
		</u-popup>
		
		<view style="height: 120rpx;"></view>
		<view class="order-foot">
			<view class="btn">
				<u-button  type="primary" hover-class="none" @click="link(`/pages/user/bottle_form?id=${id}`)" :custom-style="btnStyle"
					size="medium">钢瓶操作</u-button>
			</view>
			<view class="btn">
				<u-button  type="primary" hover-class="none"  @click="link(`/pages/user/bottle_record?id=${id}`)" :custom-style="{
					...btnStyle,
					'backgroundColor':'#19be6b',
				}"
					size="medium">进出库记录</u-button>
			</view>
		</view>
		
		
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
		let bottleList = []
		// for(let i =0; i< 40 ;i++){
		// 	bottleList.push(`000ab${i+1}`)
		// }
        return {
            ready: false,
			navlist:[{
				name:'全部',
			},{
				name:'待配送',
				id:2,
			},{
				name:'已完成',
				id:4,
			},],
			current: 0,
			btnStyle:{
				background: '#497CD0',
				borderRadius: '16px',
				padding:'0 15px',
			},
			list:[],
			listTip: {},
			orderSn:'',
			info:{},
			bottleList,
			showBottle:false,
			id:null,
			bottleTitle: '',
        };
    },
    onLoad(o) {
		this.id = o.id
		
    },
    onReady() {
    },
   onShow() {
	   this.getInit();
   },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		navigation(){
			let lat = this.info.latitude.split(',')
			console.log(lat);
			console.log(lat)
		    this.$common.navigation({
				name: this.info.address,
				lat: lat[0],
				lng:  lat[1],
			})
		},
		async getInit() {
			try {
				let res = await this.$api.siteDetail({
					id:this.id,
				});
				if (res.data.code == this.$config.RESOK) {
					this.info = res.data.data;
					this.ready = true
				} else{
				}
			} catch (e) {
			}
		},
		handleItem(list, title){
			this.bottleTitle = title;
			this.bottleList = list;
			this.showBottle = true;
		},
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: $uni-bg-color-grey;
}

.list{
	padding: 0 30rpx;
	background: #fff;
	.item{
		border-bottom: 1px solid #ddd;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		&:nth-last-child(1){
			border: 0;
		}
	}
	.info{
		flex: 1;
		padding: 0 20rpx;
	}
	.tel{
		font-size: 13px;
		display: flex;
		align-items: center;
		margin-bottom: 2px;
		color: $color;
	}
	.name{
		font-size: 15px;
		margin-bottom: 4px;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.na{
		margin-right: 5px;
	}
	.text{
		font-size: 13px;
		color: #666;
	}
}

.app{
	padding: 0 30rpx;
}

.send-popup{
		padding: 20rpx 30rpx;
		position: relative;
		.btn-close{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
		.title{
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.item{
			margin-bottom: 20rpx;
		}
		.label{
			font-size: 14px;
			margin-bottom: 6px;
		}
		.btnbox{
			padding-top: 30rpx;
		}
	}
	.tag-wrap{
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		.tag{
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
		}
	}
	
	
	.num-list{
		display: flex;
		background: #fff;
		margin: 24rpx 0;
		border-radius: 5px;
		.item{
			width: 33%;
			text-align: center;
			padding: 30rpx 0;
		}
		.num{
			font-size: 26px;
			color: $color;
			font-weight: bold;
		}
		.name{
			font-size: 13px;
			color: #666;
		}
	}
	
	.bottle{
		background: #fff;
		padding: 30rpx;
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 24rpx;
		}
		.item{
			padding: 20rpx;
			background: #f5f5f5;
			margin-bottom: 20rpx;
			position: relative;
			.icon{
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translate(0,-50%);
			}
		}
		.name{
			margin-bottom: 5px;
		}
	}
	
	.order-foot {
		text-align: right;
		padding: 10rpx 30rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #F8FAFD;
		.btn{
			display: inline-block;
			margin-left: 5px;
		}
	}
</style>
